﻿@model ShopKart.Areas.User.Models.CheckOutVm

@{
    ViewBag.Title = "Check Out";
    Layout = "~/Areas/User/Views/Shared/_UserLayout.cshtml";
}

@section Stylesheets{
    <style>
        #errorMsg {
            color: red;
            padding-left: 30px;
        }
    </style>
}

<!-- BEGIN CONTENT -->
<div class="page-content-wrapper">
    <div class="page-content">
        @foreach (var cart in @Model.UserCarts)
        {
            <div class="row">
                <div class="col-md-2">
                    <img class="img-thumbnail img-responsive" src="/UploadedFiles/@cart.Product.Image">
                </div>
                <div class="col-md-6">
                    <h2>@cart.Product.ProductName</h2>
                    <h3>@cart.Product.Price INR.</h3>
                    <p>@cart.Product.Description</p>
                </div>
                <div class="col-md-2">
                    <button data-id="@cart.CartId" id="btnRemoveProduct_@cart.CartId" type="submit" class="btn red btnRemoveProduct ladda-button formSaveButton" data-style="zoom-in">
                        <span class="ladda-label">Remove</span>
                    </button>
                </div>
            </div>
        }

        <div class="row">
            <div class="col-md-6">
                <h2>Total Price: @Model.UserCarts.Sum(x => x.Product.Price) INR.</h2>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn blue btnPlaceOrder ladda-button formSaveButton" data-style="zoom-in">
                    <span class="ladda-label">Place Order</span>
                </button>
            </div>
        </div>
        <div class="row">
            <h4 id="errorMsg" ></h4>
        </div>
    </div>


    @section scripts{

        <script>
            $(function () {
                $('.btnRemoveProduct').on('click', function () {
                    var cartId = $(this).data('id');

                    $('.btnRemoveProduct').skartAjax({
                        url: '@Url.Action("RemoveProductFromCart", "Common", new {area = "User"})' + '?cartId=' + cartId,
                        method: "POST",
                        processData: false,
                        loaderButtonSelector: '#btnRemoveProduct_' + cartId,
                        contentType: "application/json; charset=utf-8",
                        success: function (data, textStatus, jqXhr) {
                            LoadUserCart();
                            StopButtonLoading('#btnRemoveProduct_' + cartId);
                        }
                    });
                });

                $('.btnPlaceOrder').on('click', function () {
                    var cartId = $(this).data('id');
                    var html = "<h2>Order Placed Successfully....</h2>"

                    $('.btnPlaceOrder').skartAjax({
                        url: '@Url.Action("PlaceOrder", "Order", new {area = "User"})' + '?cartId=' + cartId,
                        method: "POST",
                        processData: false,
                        loaderButtonSelector: '.btnPlaceOrder',
                        contentType: "application/json; charset=utf-8",
                        success: function (data, textStatus, jqXhr) {
                            if (data === 'true')
                                $('.page-content').html(html);
                            else {
                                $('#errorMsg').html("Some Error Occurred...");
                            }
                            LoadUserCart();
                        }
                    });
                });
            });
        </script>
    }
